<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${singlePage.spec.title} + ' - ' + ${site.title},htmlType = links,header = null,leftSidebar = true,rightSidebar = true, content = ~{::content}, head = null, footer = null)}"
>
<th:block th:fragment="content">
    <main class="main full-width">
        <article class="has-image main-article">
            <header class="article-header">
                <div class="article-image">
                    <a th:href="${singlePage.status.permalink}">
                        <img th:src="${singlePage.spec.cover}" loading="lazy" th:alt="${singlePage.spec.title}">
                    </a>
                </div>
                <div class="article-details">
                    <div class="article-title-wrapper">
                        <h2 class="article-title">
                            <a th:href="${singlePage.status.permalink}">
                                [[${singlePage.spec.title}]]
                            </a>
                        </h2>
                    </div>
                    <footer class="article-time">
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock"
                                 width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                                 fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z">
                                </path>
                                <circle cx="12" cy="12" r="9">
                                </circle>
                                <polyline points="12 7 12 12 15 15">
                                </polyline>
                            </svg>
                            <time class="article-time--reading" id="article-time--reading" th:with="wordCount = ${#strings.length(singlePage.content.content)}">
                                <th:block th:if="${wordCount / 400 lt 1}">
                                    阅读时长: 1 分钟
                                </th:block>
                                <th:block th:if="${wordCount / 400 ge 1}">
                                    阅读时长: [[${wordCount / 400}]] 分钟
                                </th:block>

                            </time>
                        </div>
                    </footer>
                    <!--        <footer class="article-translations">-->
                    <!--          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language"-->
                    <!--               width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"-->
                    <!--               fill="none" stroke-linecap="round" stroke-linejoin="round">-->
                    <!--            <path stroke="none" d="M0 0h24v24H0z" fill="none">-->
                    <!--            </path>-->
                    <!--            <path d="M4 5h7">-->
                    <!--            </path>-->
                    <!--            <path d="M9 3v2c0 4.418-2.239 8-5 8">-->
                    <!--            </path>-->
                    <!--            <path d="M5 9c-.003 2.144 2.952 3.908 6.7 4">-->
                    <!--            </path>-->
                    <!--            <path d="M12 20l4-9 4 9">-->
                    <!--            </path>-->
                    <!--            <path d="M19.1 18h-6.2">-->
                    <!--            </path>-->
                    <!--          </svg>-->
                    <!--          <div>-->
                    <!--            <a href="https://blog.linsnow.cn/en/links/" class="link">-->
                    <!--              English-->
                    <!--            </a>-->
                    <!--          </div>-->
                    <!--        </footer>-->
                </div>
            </header>
            <section class="article-content" th:utext="${singlePage.content.content}">

            </section>
            <footer class="article-footer">
                <section class="article-copyright">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright"
                         width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                         fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z">
                        </path>
                        <circle cx="12" cy="12" r="9">
                        </circle>
                        <path d="M14.5 9a3.5 4 0 100 6">
                        </path>
                    </svg>
                    <span th:text="${theme.config.article.article_copyright}">
								Licensed under CC BY-NC-SA 4.0
							</span>
                </section>
            </footer>
        </article>
        <div class="article-list--compact links">
            <th:block th:each="group : ${linkFinder.groupBy()}">
                <article th:each="link : ${group.links}">
                    <a :key="i" th:href="${link.spec.url}" target="_blank" rel="noopener">
                        <div class="article-details">
                            <h2 class="article-title" th:text="${link.spec.displayName}">

                            </h2>
                            <footer class="article-time">
                                [[${link.spec.description}]]
                            </footer>
                        </div>
                        <div class="article-image">
                            <img th:src="${link.spec.logo}" loading="lazy">
                        </div>
                    </a>
                </article>
            </th:block>
        </div>

        <!--    评论组件-->
        <th:block th:replace="~{modules/widgets/article-comment :: ${theme.config.article.articleComment}}" />

        <footer th:replace="~{modules/footer :: footer}"></footer>

        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg">
            </div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item">
                    </div>
                    <div class="pswp__item">
                    </div>
                    <div class="pswp__item">
                    </div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <div class="pswp__counter">
                        </div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)">
                        </button>
                        <button class="pswp__button pswp__button--share" title="Share">
                        </button>
                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen">
                        </button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out">
                        </button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip">
                        </div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                    </button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                    </button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"
                crossorigin="anonymous" defer="">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"
                crossorigin="anonymous" defer="">
        </script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css"
              crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"
              crossorigin="anonymous">
    </main>
</th:block>
</html>